DAY 29 - Vue/Nuxt transition 轉場動畫

在 Vue 裡本身就有內置 <Transition> 組件，我們可以利用這個組件製作轉場或是狀態變化的動畫，而 Nuxt3則是延續了 Vue <Transition> 組件，我們可以自由設定各個頁面的轉場動畫，接著我們來看看兩者有那些不同的地方。

Vue Transition

Vue 提供了 <Transition> 組件及<TransitionGroup>
<Transition>在任何地方皆可使用、無須註冊，可以應用到任何想要加入效果的地方

會觸發 Transition 的時機 :

• v-if 觸發切換
• v-show 觸發切換
• 特殊元素 切換的動態組件
• 改變的 key 屬性

來看一個簡單的基本用法範例

<!-- 切換顯示  -->
<button @click="show = !show">Toggle</button

<!-- Vue transition  -->
<Transition>
  <p v-if="show">hello</p>
</Transition>

//css
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

vue transition 範例

認識 Transition CSS Class

• Enter (進入)

  • Enter-from 進入開始影格
  • Enter-to 進入結束影格

• Leave (離去)

  • Leave-from 離去開始影格
  • Leave-to 離去結束影格

上圖可以看到主要有 Enter (進入) 、 Leave (離去)，我們可以找到對應的 transition CSS Class，在裡頭撰寫自訂 CSS過場效果，例如:opacity: 0 到 opacity: 1 (透明度0 至 1 )，利用 vue transition 組件來讓切換元件、轉場動畫更流暢，打造質感的網站

官方範例程式碼

命名 Transition

一般 transition CSS Class 會以 v-做為開頭或是設定的 name

我們可以試著 命名 <Transition> 一個 name ，例如: name = fade，class如下

<Transition name="fade">
  ...
</Transition>

此時開頭 .v-enter-active 就會變成命名的名字 .fade-enter-active

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

試試看自訂 transition 命名吧 !!

Nuxt Transition

Nuxt 可以在 nuxtconfig 啟動 page transitions 到所有頁面，當我在頁面間轉換時會自動啟用 transition 效果，

首先我們在 nuxtconfig 加入 pageTransition，然後新增 name (自訂名稱) 及 mode (進場方式)

mode 預設使用 in-out 方式，進場元素的動畫優先執行，再移除本來的元素 ，而 out-in 則是相反，先移除元素才會執行動畫，可以參考 KURO 老師的範例(用 Toggle 切換了解差異)

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

接著我們需要在 app.vue 加入像 Vue transition 轉場的 CSS 動畫效果

//app.vue
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

class.***-enter-active ，**是你自訂的 name 名稱
可以看到寫法上跟 vue transition 基本上是一樣，一樣有 enter (進入)、leave(離去)，我們只需寫入對應的效果即可

會發現我們無須像 vue 一樣使用<Transition> 組件，而是在 nuxtconfig 設定即可，會自動引入十分方便

Nuxt transition 效果範例

Nuxt 不同頁面自訂 Transition

如果需要在不同的頁面設置轉場，我們只需在頁面的的 设置 pageTransition

EX、我想在about頁面加入 rotate Transition

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'rotate'
  }
})
</script>

layout Transition

我們也可以啟用 layout 布局 Transition，一樣在 NuxtConfig 設定，與 pageTransition 對應目錄不相同，可以依需求開啟

• pageTransition - 啟用到所有 pages ，對應 pages 目錄
• layoutTransition - 啟用到所有 layout ，對應 layouts 目錄

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    layoutTransition: { name: 'layout', mode: 'out-in' },
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

參考資料:

• Nuxt官方文件
• 漸變與動畫
• Vue官方文件